<template>
    <div class="entrust">
      <div>
          <div class="b-back" @click="$router.back(-1)">
            <img class="b-back" src="../../assets/l_jt.png" alt="">
          </div>
          <div class="w_tab">
                <div class="tab1"
                v-for="(item,index) in btn"
                :key="index"
                @click="tab(index)"
                :class="{active:indexs==index}"
                >{{item}}</div>
          </div>
      </div>
      <div class="view-wrapper">
          <div class="wt_block">
              <div class="head">
                  <div class="head_left">
                    <span class="nsb1">卖出</span>&nbsp;
                    <span class="ns2">BBZ/USDT</span>&nbsp;
                    <span class="ns3">05/20</span>&nbsp;
                    <span class="ns4">07:02:39</span>
                  </div>
                  <div class="head_right">
                      <span>完全成交</span>
                      <img src="../../assets/r_jt.png" alt="">
                  </div>
              </div>
              <div class="content1">
                  <div class="ns1">
                      <p class="ws1">委托价格(USDT)</p>
                      <p class="ws2">2.9213</p>
                  </div>
                  <div class="ns2">
                      <p class="ws1">委托数量(BBZ)</p>
                      <p class="ws2">123.123</p>
                  </div>
                  <div class="ns3">
                      <p class="ws1">成交额(USDT)</p>
                      <p class="ws2">202.43</p>
                  </div>
              </div>
              <div class="content2">
                  <div class="ns1">
                      <p class="ws1">成交均价(USDT)</p>
                      <p class="ws2">2.9213</p>
                  </div>
                  <div class="ns2">
                      <p class="ws1">成交数量(BBZ)</p>
                      <p class="ws2">2.9213</p>
                  </div>
                  <div class="ns3">
                      <p class="ws1">成交笔数</p>
                      <p class="ws2">1</p>
                  </div>
              </div>
          </div>
        <!-- <cube-recycle-list class="list"  :size="size" :on-fetch="onFetcha" :offset="offset">
            <template slot="item" slot-scope="{ data }">
            <div :id="data.id" class="item" @click="handleClick(data)">
                <div class="avatar" :style="{backgroundImage: 'url(' + (data.avatar || '') + ')'}"></div>
                <div class="bubble">
                <p>{{ data.msg }}</p>
                <div class="meta">
                    <time class="posted-date">{{ data.time }}</time>
                </div>
                </div>
            </div>
            </template>
        </cube-recycle-list> -->
      </div>
      <div style="height:1.333333rem"></div>
      <Tabbar :idx="1"/>
    </div>
    
</template>

<script>
// @ is an alias to /src
import Tabbar from '@/views/public/Tabbar.vue'

export default {
  name: 'extension',
  components: {
    Tabbar
  },
   data() {
    return {
        size: 50,
        offset: 100,
        indexs:0,
        btn: ['推广明细','收益明细'],
    }
  },
  created:function(){

  },
  mounted () {
      
  },
  methods: {
    //   onFetcha() {
    //     let items = []
    //     return new Promise((resolve) => {
    //         // 模拟请求 50 条数据，因为 size 设置为 50
    //         setTimeout(() => {
    //         for (let i = 0; i < 50; i++) {
    //             items.push({
    //             id: i,
    //             avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/danpliego/128.jpg',
    //             msg: '123',
    //             time: 'Thu Oct 25 2018 15:02:12 GMT+0800 (中国标准时间)'
    //             })
    //         }
    //         resolve(items)
    //         }, 1000)
    //     })
    //    },
    //    handleClick(data) {
    //     console.log('Item:' + data)
    //    },
    tab(str){
        this.indexs = str;
        
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .entrust{
        /* 限制视口 包裹组件*/
        .view-wrapper{
            position: fixed;
            top: 1.6rem;
            left: 0;
            bottom: 0;
            width: 100%;
            .wt_block{
                padding:.533333rem .4rem;
                border-bottom: 1px solid #f1f1f1;
                .head{
                    .f-flex();
                    justify-content: space-between;
                    .head_left{
                        .nsb1{
                            color: #e56337;
                            font-size: .453333rem;
                            font-weight: bold;
                        }
                        .nsb2{
                            color: #00BD84;
                            font-size: .453333rem;
                            font-weight: bold;
                        }
                        .ns2{
                            color: #000;
                            font-size: .453333rem;
                            font-weight: bold;
                        }
                        .ns3{
                            color: #A1A7B7;
                            font-size: .32rem;
                        }
                        .ns4{
                            color: #A1A7B7;
                            font-size: .32rem;
                        }
                    }
                    .head_right{
                        .f-flex();
                        span{
                            color: #A1A7B7;
                            font-size: .373333rem;
                            font-weight: bold;
                            padding-right: .266667rem
                        }
                        img{
                            width: 0.2rem;
                            height: 0.3rem;
                        }
                    }
                }
                .content1>.ns1{
                    width: 35%;
                }
                .content1>.ns2{
                    width: 30%;
                }
                .content1>.ns3{
                    width: 35%;
                }
                .content1>.ns3>.ws1{
                    text-align: right;
                }
                .content2>.ns1{
                    width: 35%;
                }
                .content2>.ns2{
                    width: 30%;
                }
                .content2>.ns3{
                    width: 35%;
                }
                .content2>.ns3>.ws1{
                    text-align: right;
                }
                .content1{
                    margin-top: .533333rem;
                    .f-flex();
                    justify-content: space-between;
                    .ns1{
                        text-align: left;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns2{
                        text-align: left;
                        margin-bottom: .266667rem;
                       .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns3{
                        text-align: right;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                            text-align: right;
                        }
                    }
                }
                .content2{
                    .f-flex();
                     margin-top: .273333rem;
                    justify-content: space-between;
                    .ns1{
                        text-align: left;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns2{
                        text-align: left;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns3{
                        text-align: right;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                            text-align: right;
                        }
                    }
                }
            }
        }
        .b-back{
            position: absolute;
            left:.4rem;
            top: .3rem;
            height: 1.6rem;
            img{
                width: .213333rem;
                height: .373333rem;
            }
        }
        .xiaohua{
            width: .506667rem;
            position: absolute;
            right: .4rem;
            top: .6rem;

        }
        .w_tab{
            height: 1.6rem;
            .f-flex();
            justify-content: center;
            .tab1{
                color: #737a92;
                border:1px solid#c3c6cf;
                position: relative;
                font-size: .373333rem;    
                height: .88rem;     
                width: 2.133333rem;
                line-height: .88rem; 
                text-align: center;
            }
            .tab1.active{
                background-color: #f57d13;
                color: #fff;
                border-radius: 0;    
            }
        }
        
    }
</style>

